<h1>Logs</h1>

<div class="centered-button-bar" *ngIf="(pageLiveObservable | async) === false">
  <button [disabled]="loadingObservable | async" mat-stroked-button
          aria-label="Show latest" (click)="gotoLatestItems()">
    Show latest
    <mat-icon>change_circle</mat-icon>
  </button>
</div>

<ng-container *ngIf="(itemsObservable | async) as dataSource">
  <table mat-table [dataSource]="dataSource" [trackBy]="trackFn">

    <ng-container matColumnDef="icon">
      <th mat-header-cell *matHeaderCellDef class="mat-cell--icon-cell"></th>
      <td mat-cell *matCellDef>
        <i class="fas fa-book"></i>
      </td>
    </ng-container>

    <ng-container matColumnDef="logID">
      <th mat-header-cell *matHeaderCellDef>Log ID</th>
      <td mat-cell *matCellDef="let log">
        <a [routerLink]="log.blockNumber + '-' + log.logIdx">{{log.blockNumber + '-' + log.logIdx}}</a>
      </td>
    </ng-container>

    <ng-container matColumnDef="age">
      <th mat-header-cell *matHeaderCellDef>Time</th>
      <td mat-cell *matCellDef="let log">
        <time-ago [value]="log.blockDatetime"></time-ago>
      </td>
    </ng-container>

    <ng-container matColumnDef="block">
      <th mat-header-cell *matHeaderCellDef>Block</th>
      <td mat-cell *matCellDef="let log">
        <a [routerLink]="'../block/' + log.blockNumber">{{log.blockNumber}}</a>
      </td>
    </ng-container>

    <ng-container matColumnDef="type">
      <th mat-header-cell *matHeaderCellDef>Type</th>
      <td mat-cell *matCellDef="let log">
        {{log.typeName}}
      </td>
    </ng-container>

    <ng-container matColumnDef="details">
      <th mat-header-cell *matHeaderCellDef class="mat-cell--details-link-cell"></th>
      <td mat-cell *matCellDef="let log">
        <a [routerLink]="log.blockNumber + '-' + log.logIdx"><span class="material-icons">chevron_right</span></a>
      </td>
    </ng-container>

    <tr mat-header-row *matHeaderRowDef="visibleColumns; sticky: true"></tr>
    <tr mat-row *matRowDef="let myRowData; columns: visibleColumns"></tr>

  </table>

  <div *ngIf="(loadingObservable | async) === false && dataSource.length === 0">
    <ng-container [ngSwitch]="pageLiveObservable | async">
      <ng-container *ngSwitchCase="true">
        No items. Waiting for new blocks.
      </ng-container>
      <ng-container *ngSwitchDefault>
        No items found.
      </ng-container>
    </ng-container>
  </div>

</ng-container>

<div *ngIf="loadingObservable | async">
  <mat-progress-bar mode="indeterminate"></mat-progress-bar>
</div>

<div>
  <ng-container *ngIf="(hasNextPageObservable | async)">
    <button [disabled]="(loadingObservable | async)" mat-stroked-button aria-label="Next" (click)="loadMoreItems()">
      <ng-container *ngIf="(searchInfoObservable | async) as searchInfo">
        <ng-template #showMore>Show More</ng-template>
        <ng-container *ngIf="searchInfo.endOfBlockRange; else showMore">
          Increase search range
        </ng-container>
      </ng-container>
      <mat-icon>expand_more</mat-icon>
    </button>
  </ng-container>

  <ng-container class="list-block-range" *ngIf="(pageLiveObservable | async) === false">
    <ng-container *ngIf="(searchInfoObservable | async) as searchInfo">
      <span class="list-block-range" *ngIf="searchInfo.fromBlock">
        Search range: Blocks {{ searchInfo.fromBlock }} - {{ searchInfo.toBlock }}
      </span>
    </ng-container>
  </ng-container>
</div>
